<template>
  <view class="wrapper-list-goods">
    <scroll-view class="scroll-view_x goods-detail" scroll-x style="width: auto; overflow: hidden">
      <block v-for="(item, index) in newData" :key="index">
        <navigator hover-class="none" :url="'/pages/goods/goods-detail/index?id=' + item.id"
          class="item flex goods-box radius">
          <view @tap="click">
            <view class="img-box">
              <image :src="
                  item.picUrls[0]
                    ? item.picUrls[0]
                    : '/static/public/img/no_pic.png'
                "></image>
            </view>
            <view class="text-cut goods-name margin-top-sm text-sm padding-left-sm">{{ item.name }}</view>
            <view class="text-price text-red margin-left-sm margin-xs text-lg text-bold">{{ item.priceDown }}</view>
          </view>
        </navigator>
      </block>
    </scroll-view>
  </view>
</template>

<script>
  const app = getApp();
  export default {
    components: {},
    props: {
      value: {
        type: Array
      },
    },
    data() {
      return {
        theme: app.globalData.theme, //全局颜色变量
        newData: this.value,
      };
    },
    mounted() { },
    methods: {
      click() {
        uni.$emit("newShopsList", "1");
      },
      jumpPage(page) {
        if (page) {
          uni.navigateTo({
            url: page,
          });
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .wrapper-list-goods {
    white-space: nowrap;
  }

  .wrapper-list-goods .item {
    display: inline-block;
    width: 260rpx;
    height: 380rpx;
    margin-right: 20rpx;
    border: 1rpx solid #eee;
    background-color: #fff;
  }

  .wrapper-list-goods .item:nth-last-child(1) {
    margin-right: 0;
  }

  .wrapper-list-goods .item .img-box {
    width: 100%;
    height: 260rpx;
  }

  .wrapper-list-goods .item .img-box image {
    width: 100%;
    height: 100%;
    border-radius: 5rpx 5rpx 0 0;
  }

  .goods-selection {
    margin-left: 0rpx !important;
    color: #666666;
  }

  .goods-more {
    margin-right: 0rpx !important;
    color: #666666;
  }

  .goods-box {
    width: 349rpx;
    height: 530rpx;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }

  .goods-box .img-box {
    width: 100%;
    height: 349rpx;
    overflow: hidden;
  }

  .goods-box .img-box image {
    width: 100%;
    height: 349rpx;
  }
</style>